<template>
  <!-- 抢红包面板 -->
  <div class="open-redpacket flex-center column">
    <div class="redpacket">
      <div class="info-bg elevation"></div>
      <div class="sender flex-center column">
        <div class="head flex-center">
          <img :src="packet.headUrl" alt="">
          <span class="ellipsis">{{ packet.userNick }} 的积分</span>
        </div>

        <div class="msg ellipsis" v-if="!opened">
          {{ message }}
        </div>
        <div class="msg amount" v-else>
          积分已抢完
        </div>

        <div v-if="!opened" class="open flex-center elevation" @click="onOpenRedpacket">
          <img class="open-image" src="@/assets/images/open.png" alt="">
        </div>

        <div class="view-details flex-center" v-if="opened" @click="onGotoDetails">
          <span>查看领取详情</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>
    <div class="close-btn">
      <img @click="onCancel" class="close-image" src="@/assets/icons/red-close.svg" alt=""/>
    </div>


  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Webim } from '@/utils/types';
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
declare const $Vue: Vue;
declare const webim: Webim;
@Component<OpenRedpacket>({
  mixins: [MessageMixin],
})
export default class OpenRedpacket extends Vue {
  // 表示映射chat模块下的mutation方法

  @Prop({})
  packet: any;

  private opened: boolean = false;

  private message: string = '积分多多，欢乐多多';

  private eventList: Array<string> = [
    "$openRedpacket",
    "$getPacketStatus",
  ];

  protected mounted() {
    this.initEvents(this.eventList);
    this.sendMessage(MsgTypeKV.getPacketStatus, {
      sendId: this.packet.sendId,
    });
  }

  /**
   * 点击抢红包
   */
  private onOpenRedpacket() {
    this.sendMessage(MsgTypeKV.openRedpacket, {
      sendId: this.packet.sendId,
    });
  }

  private onCancel() {
    this.$emit('hide');
  }

  private onGotoDetails() {
    this.$router.push({
      name: 'RedpacketDetail',
      params: this.packet,
    });
  }

  private $openRedpacket(data: any) {
    if (data.result === 0) {
      this.$emit('detail', { data: this.packet });
    } else {
      this.$emit('detail', { data: this.packet });
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  private $getPacketStatus(data: any) {
    if (data.result === 0) {
      if (data.status === 2 && this.packet.sendId === data.sendId) {
        this.opened = true
      }
    } else {
    }
  }

}
</script>

<style lang="stylus" scoped>
.open-redpacket
  position fixed
  width 100% 
  height 100% 
  left 0 
  background rgba(255, 255, 255, 0.4)
  z-index 999
  .redpacket 
    overflow hidden
    width 80% 
    height 80% 
    border-radius 8px
    background #2196F3
    position relative
    .info-bg
      width 600px
      height 600px
      border-radius 50% 
      background #03A9F4 
      position absolute
      left -4rem
      bottom 90px
    .sender
      position relative
      height 60%
      .head 
        color #fae3b7
        font-size 18px
        img 
          width 30px 
          height 30px 
          border-radius 4px
          margin-right 12px 
      .msg 
        margin-top 20px
        color #fae3b7
        font-size 20px
        &.amount
          font-size 40px
          font-weight 500
    .open
      background #e6cea0
      width 100px 
      height 100px
      border-radius 50%
      position absolute 
      bottom -156px
      .open-image 
        width 60%
        height 60%
    .view-details
      position absolute 
      bottom -186px
      color #fae3b7
      font-size 14px
      span 
        display inline-block
        margin-right 12px
        position relative
        top 2px

.close-btn
  width 100% 
  height 44px 
  margin-top 16px
  .close-image 
    width 40px 
    height 40px
    text-align center

.elevation 
  box-shadow: 0px 0px 5px 0.2px rgba(0, 0, 0, 0.34)
.msg.amount 
  font-size 16px!important
</style>

